<template>
  <div class="container">
    <el-row :gutter="16" justify="center">
      <el-col :xs="24" :sm="20" :md="18" :lg="16">
        <h1 class="page-title">
          <i class="fas fa-user-astronaut"></i>
          关于我
        </h1>

        <el-card class="card" shadow="hover">
          <template #header>
            <div class="card-header"><span>个人简介</span></div>
          </template>
          <p class="muted">专注后端与云原生，热爱分享高质量技术内容与工程实践，关注可观测性与高可用。</p>
        </el-card>

        <el-card class="card" shadow="hover" style="margin-top: 16px;">
          <template #header>
            <div class="card-header"><span>技术栈</span></div>
          </template>
          <div class="stack">
            <div>
              <strong>后端</strong>
              <div class="tags">
                <el-tag effect="dark" type="success">Python</el-tag>
                <el-tag effect="dark">FastAPI</el-tag>
                <el-tag effect="dark">Django</el-tag>
                <el-tag effect="dark">Flask</el-tag>
                <el-tag effect="dark">Go</el-tag>
              </div>
            </div>
            <div>
              <strong>前端</strong>
              <div class="tags">
                <el-tag effect="dark">Vue 3</el-tag>
                <el-tag effect="dark">TypeScript</el-tag>
                <el-tag effect="dark">Element Plus</el-tag>
              </div>
            </div>
            <div>
              <strong>基础设施</strong>
              <div class="tags">
                <el-tag effect="dark">Docker</el-tag>
                <el-tag effect="dark">K8s</el-tag>
                <el-tag effect="dark">Nacos</el-tag>
                <el-tag effect="dark">Redis</el-tag>
                <el-tag effect="dark">MySQL</el-tag>
                <el-tag effect="dark">MongoDB</el-tag>
              </div>
            </div>
            <div>
              <strong>可观测性</strong>
              <div class="tags">
                <el-tag effect="dark">Prometheus</el-tag>
                <el-tag effect="dark">Alertmanager</el-tag>
                <el-tag effect="dark">ELK</el-tag>
                <el-tag effect="dark">SkyWalking</el-tag>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="card" shadow="hover" style="margin-top: 16px;">
          <template #header>
            <div class="card-header"><span>方向与经验</span></div>
          </template>
          <ul class="bullets">
            <li>API 设计与高并发服务治理，异步任务与消息队列实战</li>
            <li>容器化与 CI/CD，上线与回滚流程优化</li>
            <li>日志、指标、链路追踪一体化接入与告警规则落地</li>
          </ul>
        </el-card>

        <el-card class="card" shadow="hover" style="margin-top: 16px;">
          <template #header>
            <div class="card-header"><span>联系我</span></div>
          </template>
          <p class="muted">GitHub：<a href="#" target="_blank" rel="noopener">你的链接</a> · 邮箱：<a href="mailto:you@example.com">you@example.com</a></p>
          <div class="wechat">
            <img src="/wechat.jpg" alt="微信二维码" loading="lazy" />
            <div class="caption">扫码加我微信，备注“博客”，拉你进入技术交流群</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.container { max-width: 1440px; margin: 0 auto; padding: 2rem 1rem; }
.muted { color: var(--muted); }
.page-title {
  font-family: 'Orbitron', monospace;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.page-title i {
  color: var(--primary);
}

.card { 
  background: var(--glass); 
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(15px);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.card-header { display: flex; align-items: center; justify-content: space-between; }
.stack { display: grid; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bullets { margin: 0; padding-left: 1.1rem; }
.wechat { margin-top: 8px; display: grid; place-items: center; }
.wechat img { width:500px; max-width: 60%; border-radius: 12px; border: 1px solid #e5e7eb; background: #ffffff; }
.caption { margin-top: 6px; color: var(--muted); font-size: .92rem; }
</style>

